<include file="Public:head" />
	<style>
		li{
			height:30px;line-height:30px;vertical-align: middle;
			padding-left: 10px;
		}
		li:hover{
			background: #ccc;
		}
	
        [v-cloak]{
            display: none;
        }
    
	</style>
	<div class="table_box">
		<div style="margin: 15px;">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>vue小功能</legend>
			</fieldset>
			<form class="layui-form" >
				<div class="layui-form-item">
					<label class="layui-form-label" style="width:120px" >vue模拟百度搜索</label>
					<div class="layui-input-block" style="    margin-left: 150px;">
						<input type="text" name="web_name" id="web_name"  placeholder="请输入搜索内容" class="layui-input"  v-on:keyup='jsonp()' v-model='msg'>
					</div>
					<div style="margin-left: 150px;" >
						<ul style="border:1px solid #ccc" v-show='arr.length!=0' v-cloak>
							<li v-for='(val,key) in arr'  :name='key' @click='arrIndex=key;chenge()'>
								{{val}} 
							</li>
						</ul>
					</div>
				</div>
			</form>
		</div>
	</div>

<include file="Public:foot" />

<!-- -------------------------------------------------------------------------------- -->

<script type="text/javascript" src="__ROOT__/public/vue/vue.min.js"></script>
<script type="text/javascript" src="__ROOT__/public/vue/vue-resource.js"></script>
<script>
window.onload=function  () {
	new Vue({
		el:'.table_box',
		data:{
			msg:'',
			arr:[],
			arrIndex: ''
		},
		methods:{
			chenge:function(){
				// alert(11)
				// alert(ind)
				this.msg = this.arr[this.arrIndex]
				this.arr = ''
			},
			jsonp:function(){
				this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{wd:this.msg},{jsonp:'cb'}).then(function(res){
					
					this.arr=res.data.s
				},function(){

				});
			}
			
		}
	})

}
</script>


